<template>
  <div>
    <div class="container_bar">
      <div class="check_warp">
        <i class="iconfont icon-yuanxingxuanzhong"></i>
        <span>共0项</span>
      </div>
      <div class="view_toggle">
        <div>
          <i class="iconfont icon-jiantou_shangxiaqiehuan_o"></i>
          <span>按时间创建</span>
        </div>
        <div @click="changeView">
          <i class="iconfont icon-gengduocaidan"></i>
        </div>
      </div>
    </div>

    <!--表格-->
    <div class="table_style" v-if="this.ischangeView == 'table' ? true : false">
      <el-table
        :default-sort="{ prop: 'filedate', order: 'descending' }"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          label="全选"
          width="45"
        ></el-table-column>
        <el-table-column
          sortable
          prop="filename"
          label="文件名"
          min-width="250"
        >
          <template slot-scope="scope">
            <div class="file_img" v-if="scope.row.filetype == '文件夹'">
            <img             
              src="../../assets/img/icon-folder.png"
              alt=""
            />
            </div>
            <div class="file_img" v-if="scope.row.filetype == '文档'">
            <img        
              src="../../assets/img/icon-doc.png"
              alt=""
            />
            </div>
            <span style="margin-left: 10px">{{ scope.row.filename }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable prop="filetype" label="类型" width="120">
        </el-table-column>
        <el-table-column sortable prop="filedate" label="时间" width="120">
        </el-table-column>
        <el-table-column sortable prop="filesize" label="大小" width="120">
        </el-table-column>
      </el-table>
    </div>

    <!--列表视图-->
    <div class="big_view" v-if="this.ischangeView == 'big_view' ? true : false">
      <ul class="bd">
        <li v-for="item in tableData" :key="item.fileIndex" @mouseover.stop="showFileView(item.fileIndex)" @mouseleave.stop="clearMouseStyle">
            <i v-show="(isIndexLi == item.fileIndex ? true : false) && isShow_xuanze_icon" class="iconfont icon-weixuanzhong"></i>
            <i v-show="(isIndexLi == item.fileIndex ? true : false) && isShow_xuanze_icon" class="iconfont icon-gengduocaidan"></i>
            <div class="hotSpot">
              <div v-if="item.filetype == '文件夹'">
                <img src="../../assets/img/icon-folder.png" alt="">
              </div>
              <div v-if="item.filetype == '文档' ">
                <img src="../../assets/img/icon-doc.png" alt="">
              </div>
              <p class="title"> {{item.filename}} </p>
              <p class="time"> {{item.filedate}} </p>
            </div>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>
// import Search from '../../components/search/search.vue'
export default {
  components: {
    // Search
  },
  data() {
    return {
      tableData: [
        {
          fileIndex: "1",
          filename: "aaa",
          filetype: "文件夹",
          filedate: "2021-05-03",
          filesize: "11",
        },
        {
          fileIndex: "2",
          filename: "bbb",
          filetype: "文档",
          filedate: "2021-05-05",
          filesize: "22",
        },
        {
          fileIndex: "3",
          filename: "ccc",
          filetype: "文件夹",
          filedate: "2021-05-04",
          filesize: "33",
        },
        {
          fileIndex: "4",
          filename: "ddd",
          filetype: "文档",
          filedate: "2021-05-07",
          filesize: "44",
        },
        {
          fileIndex: "5",
          filename: "fff",
          filetype: "文件夹",
          filedate: "2021-05-01",
          filesize: "55",
        },
      ],
      ischangeView: "big_view", // table 和 bigView 互相切换
      isShow_xuanze_icon: false , // 选择框的 icon 小图标是否显示
      isIndexLi: '', // 选中的序号
      
    };
  },
  created() {
    this.outInfo();
  },
  methods: {
    outInfo() {
      // console.log(this.isSearchShow, '=====' + this.searchShow)
    },
    changeView() {
      if (this.ischangeView === "table") {
        return this.ischangeView = "big_view"
      } else {
        return this.ischangeView = "table"
      }
    },
    // 鼠标经过事件
    showFileView(index) {
      console.log(index)
      this.isIndexLi = index
      this.isShow_xuanze_icon = true
    },
    clearMouseStyle(){
      this.isIndexLi = ''
      this.isShow_xuanze_icon = false
    }
  },
};
</script>
<style scoped>
@import url("../../assets/css/pages/personal/style.css");
</style>

